<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_事件处理</title>
</head>
<body>
<div id='test'>
    <h2>1. 绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('abc')">test2</button>
    <!--$event:事件对象-->
    <button @click="test3('abcd', $event)">test3</button>

    <h2>2. 事件修饰符</h2>
    <!--两个div嵌套 会出现事件冒泡问题：点击里面的div  外面div的事件 也会被触发-->
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <!--使用@click.stop可以 停止事件冒泡-->
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>
    <!--阻止事件的默认行为-->
    <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a>


    <h2>3.按键修饰符</h2>

    <input type="text" @keyup.13="test8"/>
    <input type="text" @keyup.enter="test8"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>

<script>
    new Vue({
        el: '#test',
        data: {},
        methods: {
            /*不传参数 默认传的是事件对象*/
            test1(event) {
                alert(event.target.innerHTML)
            },
            test2(msg) {
                alert(msg)
            },
            /*如果传了参数，那么事件对象就必须显示地传过来*/
            test3(msg, event) {
                alert(msg + '---' + event.target.textContent)
            },
            test5() {
                alert("out")
            },
            test6() {
                alert("inner")
            },
            test7() {
                alert("")
            },
            test8(event) {
                /*只有按下enter键才触发*/
               /* if (event.keyCode === 13) {
                    alert(event.target.value + ' ' + event.keyCode)
                }*/
                alert("aaa")
            }
        }
    })

</script>
</body>
</html>